import React, {PureComponent} from "react"
import "./index.less"
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Breadcrumb, Empty, PageHeader } from "antd";
import {Link} from "react-router-dom";
import {withRouter} from "react-router"
import "animate.css"
import orderCompose from "./compose"
import OrderUnPay from "./panels/unpay"
import OrderClosed from "./panels/closed"
import OrderFinished from "./panels/finished"
import OrderSubmitted from "./panels/submitted"
import Paying from "./panels/paying"
import cs from "classnames"


const renderByStatus = (data, refreshOrder, onBack, onNeedPrintChange) => {
  if (!data || !data.id) {
    return <div className={'ld2-info-page-empty'}><Empty/></div>
  }
  if (data.status === 'un_pay') {
    return <OrderUnPay data={data}
                       onNeedPrintChange={onNeedPrintChange}
                       onBack={onBack}
                       refreshOrder={refreshOrder}></OrderUnPay>
  }

  if (data.status === 'submitted') {
    return <OrderSubmitted data={data}
                           onBack={onBack}
                           refreshOrder={refreshOrder}></OrderSubmitted>
  }

  if (data.status === 'paying') {
    return <Paying data={data}
                   onBack={onBack}
                   refreshOrder={refreshOrder}></Paying>
  }

  if (data.status === 'timeout' || data.status === 'cancel') {
    return <OrderClosed data={data} onBack={onBack}></OrderClosed>
  }

  if (data.status === 'paid') {
    return <OrderFinished data={data} onBack={onBack}></OrderFinished>
  }
}

//订单确认页(状态un_pay ---> paying)
@withRouter
@orderCompose
export default class OrderInfo extends PureComponent {
	render() {
		const {data, getOrderInfo, onBack, onNeedPrintChange} = this.props

		return (
            <div className={'zr-panel'}>
				<div className={'zr-panel-header'}>
					<div>
						{/*<Breadcrumb>*/}
						{/*	<Breadcrumb.Item><Link to="/app/home">首页</Link></Breadcrumb.Item>*/}
						{/*	<Breadcrumb.Item><Link to="/app/my-order/history-order">订单</Link></Breadcrumb.Item>*/}
						{/*	<Breadcrumb.Item>订单信息</Breadcrumb.Item>*/}
						{/*</Breadcrumb>*/}
						<PageHeader backIcon={<ArrowLeftOutlined />}
						            onBack={onBack} title={`订单`}/>
					</div>
				</div>

				<div className={'ld2-info-page-box absolute'}>
					<div className={cs('ld2-order-page-box', {empty: !data || !data.id})}>
						{
							renderByStatus(data, getOrderInfo, onBack, onNeedPrintChange)
						}
					</div>
				</div>
			</div>
        );
	}
}